<template>
  <div>
    <!-- ******************************** type == 1 ********************************* -->
    <el-table :height="calTableHeight() - 50" ref="TableRef" :data="data">
      <el-table-column type="index" :label="$t('序号')" width="60" align="center" />
      <el-table-column show-overflow-tooltip align="center" :label="$t('租户')" prop="distrName" />
      <el-table-column show-overflow-tooltip align="center" :label="$t('订单运费')" prop="batchExpressFee">
        <template slot-scope="{ row }">
          <el-button type="text" @click="showOrderInfor(3, row)">
            {{ row.batchExpressFee ? (+row.batchExpressFee).toFixed() : '' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" :label="$t('订单捆包费')" prop="batchBaleFee">
        <template slot-scope="{ row }">
          <el-button type="text" @click="showOrderInfor(3, row)">
            {{ row.batchBaleFee ? (+row.batchBaleFee).toFixed() : '' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        align="center"
        :label="$t('订单sku费用收取')"
        prop="batchSkuWaitPayTotal">
        <template slot-scope="{ row }">
          <el-button type="text" @click="showOrderInfor(4, row)">
            {{ row.batchSkuWaitPayTotal ? (+row.batchSkuWaitPayTotal).toFixed() : '' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        align="center"
        :label="$t('订单sku费用支付')"
        prop="batchSkuTotalPrice">
        <template slot-scope="{ row }">
          <el-button type="text" @click="showOrderInfor(4, row)">
            {{ row.batchSkuTotalPrice ? (+row.batchSkuTotalPrice).toFixed() : '' }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" :label="$t('总营收')" prop="payAmount">
        <template #default="{ row }">
          {{ row.payAmount ? (+row.payAmount).toFixed() : '' }}
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        align="center"
        :label="$t('卖家支付金额修改备注')"
        prop="payAmountUpdateRemark">
      </el-table-column>

      <el-table-column show-overflow-tooltip align="center" :label="$t('创建时间')" prop="createTime">
      </el-table-column>
    </el-table>
    <!-- 10.订单费用明细 -->
    <Expense :show.sync="ExpenseData.show" :data="FormData" title="订单费用明细的sku费用"></Expense>
    <FreightExpense
      :show.sync="ExpenseData.FreightExpenseshow"
      :data="FormData"
      title="订单费用明细运费和捆包费用"></FreightExpense>
    <consumptionTax
      :show.sync="ExpenseData.consumptionTaxshow"
      :data="FormData"
      title="订单sku费用明细"></consumptionTax>
  </div>
</template>
<script>
import handleTableSum from '@/utils/handleSum'
import FreightExpense from './freightExpense.vue'
import ConsumptionTax from './consumptionTax.vue'
import Expense from './expense.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    // FormData:{
    //   type:Object,
    //   default: () => {},
    // },
    /**
     * data
     */
    // FormData: {
    //   type: Object,
    //   default: () => {},
    // },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      FormData: {},
      ExpenseData: {
        show: false,
        FreightExpenseshow: false,
        consumptionTaxshow: false,
      },
    }
  },
  components: {
    Expense,
    FreightExpense,
    ConsumptionTax,
  },
  methods: {
    /**展示不同费用明细   */
    showOrderInfor(type, row) {
      this.FormData = row
      // console.log(row,'sss');
      if (type == 1) {
        this.ExpenseData.show = true
      } else if (type == 3) {
        this.ExpenseData.FreightExpenseshow = true
      } else if (type == 4) {
        this.ExpenseData.consumptionTaxshow = true
      }
    },
    handleSum(param) {
      /**
       * 需要进行统计的字段
       */
      const data = handleTableSum(
        param,
        ['batchBaleFee', 'batchExpressFee', 'batchHandlingFee', 'batchSkuWaitPayTotal'],
        '统计',
        0,
      )
      console.log(`data ==>`, JSON.parse(JSON.stringify(data)))
      return data
    },
  },
}
</script>
